<template>
  <view class="uni-password">
    <form @submit="formSubmit">
      <view class="uni-form-item uni-column">
        <view class="title">旧密码</view>
        <view class="uni-input">
          <input
            :password="eyeFilled.password"
            name="input"
            placeholder="请输入旧密码(6-20位)"
            class="input-password"
            v-model="password"
            maxlength="20"
            @input="passwordInput($event, 'password')"
            @blur="blurInput($event, 'password')"
          />
          <view>
            <uni-icons
              type="eye-filled"
              size="24"
              v-show="!eyeFilled.password"
              @click="eyeFilledClick('password')"
            ></uni-icons>
            <uni-icons
              type="eye-slash-filled"
              size="24"
              v-show="eyeFilled.password"
              @click="eyeFilledClick('password')"
            ></uni-icons>
            <uni-icons
              type="clear"
              size="20"
              color="#f00"
              v-show="!verify.password"
            ></uni-icons>
            <uni-icons
              type="checkbox-filled"
              size="20"
              color="#00a308;"
              v-show="verify.password"
            >
            </uni-icons>
          </view>
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">新密码</view>
        <view class="uni-input">
          <input
            :password="eyeFilled.newPassword"
            name="input"
            placeholder="请输入需要更换密码(6-20位)"
            class="input-password"
            v-model="newPassword"
            maxlength="20"
            @input="passwordInput($event, 'newPassword')"
          />
          <view>
            <uni-icons
              type="eye-filled"
              size="24"
              v-show="!eyeFilled.newPassword"
              @click="eyeFilledClick('newPassword')"
            ></uni-icons>
            <uni-icons
              type="eye-slash-filled"
              size="24"
              v-show="eyeFilled.newPassword"
              @click="eyeFilledClick('newPassword')"
            ></uni-icons>
            <uni-icons
              type="clear"
              size="20"
              color="#f00"
              v-show="!verify.newPassword"
            ></uni-icons>
            <uni-icons
              type="checkbox-filled"
              size="20"
              color="#00a308;"
              v-show="verify.newPassword"
            >
            </uni-icons>
          </view>
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">新密码验证</view>
        <view class="uni-input">
          <input
            :password="eyeFilled.confirmPassword"
            name="input"
            placeholder="请再次输入需要更换密码(6-20位)"
            class="input-password"
            v-model="confirmPassword"
            maxlength="20"
            @input="passwordInput($event, 'confirmPassword')"
          />
          <view>
            <uni-icons
              type="eye-filled"
              size="24"
              v-show="!eyeFilled.confirmPassword"
              @click="eyeFilledClick('confirmPassword')"
            ></uni-icons>
            <uni-icons
              type="eye-slash-filled"
              size="24"
              v-show="eyeFilled.confirmPassword"
              @click="eyeFilledClick('confirmPassword')"
            ></uni-icons>
            <uni-icons
              type="clear"
              size="20"
              color="#f00"
              v-show="!verify.confirmPassword"
            ></uni-icons>
            <uni-icons
              type="checkbox-filled"
              size="20"
              color="#00a308;"
              v-show="verify.confirmPassword"
            >
            </uni-icons>
          </view>
        </view>
      </view>
      <view class="uni-btn-v">
        <button class="uni-btn-c" @click="open">确认修改</button>
      </view>
    </form>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        mode="base"
        type="message"
        :duration="2000"
        :before-close="true"
        title="提醒"
        content="更改后该账号后台密码将同步更新确认更改当前账号密码吗？"
        @confirm="confirm"
        @close="close"
      ></uni-popup-dialog>
    </uni-popup>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { checkUserPwd, updateUserPwd } from "@/common/yftx-api.js";
import { logout } from "@/common/yftx-api.js";
import { getToken, removeToken } from "@/util/auth.js";
export default {
  data() {
    return {
      password: null,
      newPassword: null,
      confirmPassword: null,
      verify: {
        password: null,
        newPassword: null,
        confirmPassword: null,
      },
      eyeFilled: {
        password: true,
        newPassword: true,
        confirmPassword: true,
      },
    };
  },
  methods: {
    // 点击密码眼睛
    eyeFilledClick(string) {
      this.eyeFilled[string] = !this.eyeFilled[string];
    },

    // 旧密码失去焦点
    blurInput(event, string) {
      if (this.verify.password) {
        this.checkUserPwd();
      }
    },

    // 判断数据符合规范去除空格
    passwordInput: function (event, string) {
      const str1 = this[string];
      const str2 = str1.replaceAll(" ", "");
      event.detail = { value: str2 };
      this[string] = str2;
      const data = (this[string] + "").trim();
      if (20 >= data.length && data.length >= 6) {
        if (string === "confirmPassword") {
          if (this.newPassword) {
            if (this[string] === this.newPassword) {
              this.verify.newPassword = true;
              this.verify[string] = true;
            } else {
              this.verify[string] = false;
            }
          } else {
            this.verify[string] = true;
          }
        } else if (string === "newPassword") {
          if (this.confirmPassword) {
            if (this[string] === this.confirmPassword) {
              this.verify.confirmPassword = true;
              this.verify[string] = true;
            } else {
              this.verify[string] = false;
            }
          } else {
            this.verify[string] = true;
          }
        } else {
          this.verify[string] = true;
        }
      } else {
        this.verify[string] = false;
      }
    },

    //获取密码
    checkUserPwd() {
      checkUserPwd({ password: this.password }).then((res) => {
        if (res.code == 200 && res.data) {
          this.verify.password = true;
        } else {
          this.verify.password = false;
          uni.showToast({
            icon: "error",
            title: "旧密码错误",
            duration: 2000,
          });
        }
      });
    },

    // 点击修改密码
    open: function () {
      const verify =
        this.verify.password &&
        this.verify.newPassword &&
        this.verify.confirmPassword;
      const isVerify = this.newPassword === this.confirmPassword;

      if (verify && isVerify) {
        this.$refs.popup.open();
      } else if (!isVerify) {
        uni.showToast({
          icon: "error",
          title: "新密码不一致",
          duration: 2000,
        });
      } else {
        uni.showToast({
          icon: "error",
          title: "请正确填写密码",
          duration: 2000,
        });
      }
    },

    // 点击确认修改
    confirm: function () {
      updateUserPwd({
        password: this.password,
        newPassword: this.newPassword,
        confirmPassword: this.confirmPassword,
      }).then((res) => {
        uni.showToast({
          icon: "success",
          title: res.msg,
          duration: 2000,
        });
        this.close();
        this.formReset();
        this.handleExit();
      });
    },

    // 退出
    handleExit() {
      let token = getToken();
      logout(token).then((res) => {
        if (res && res.code === 200) {
          removeToken();
          this.$refs.uToast.show({
            message: res.msg,
            duration: 2000,
          });
          uni.setStorageSync("logout", "today");
          uni.redirectTo({
            url: "/pages/index/login",
          });
        }
      });
    },

    // 退出确认弹框
    close: function () {
      this.$refs.popup.close();
    },

    // 清空数据
    formReset: function (e) {
      this.password = null;
      this.newPassword = null;
      this.confirmPassword = null;
      this.verify = {
        password: null,
        newPassword: null,
        confirmPassword: null,
      };
    },
  },
};
</script>

<style lang="scss">
.input-password {
  flex: 1;
}

.uni-password {
  text-align: center;
  padding: 20% 5%;
}

.uni-form-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 95rpx;
}

.uni-input {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 30rpx;
  text-align: start;
  width: 100%;
  border-bottom: 1px solid #a5a5a5;
}

.uni-form-item .title {
  font-size: 30rpx;
  text-align: start;
  width: 33%;
}

.uni-btn-c {
  margin-top: 120rpx;
  height: 78rpx;
  line-height: 78rpx;
  font-size: 30rpx;
  color: #fff;
  background-color: rgb(84, 84, 255);
}
</style>
